<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>QAMS</title>
    <link type="text/css" href="css/custom.css" rel="stylesheet" media="screen"/>
    <link type="text/css" href="css/colorpicker.css" rel="stylesheet" media="screen"/>
    <link type="text/css" href="css/common_effects.css" rel="stylesheet" media="screen"/>
    <!-- 常用样式类集合 -->
    <!--<link type="text/css" href="css/auxiliary_effect.css" rel="stylesheet" media="screen"/>-->
</head>
<body>
<div class="wrapper custom_canvas_page">
<div class="qam_topfix_bar qam_reset">
    <div class="qam_topfix_bar_inner">
        <h1><a href="index.htm">QAMS.</a></h1>

        <div class="topfix_op">
            <ul>
                <li><a id="add_layout" title="往页面中加入特定的布局"><i class="qam_ico qam_ico_add_layout"></i><span>添加布局</span></a></li>
                <li><a id="css_list" title="选择此页面可以使用的公用样式"><i class="qam_ico qam_ico_css_list"></i><span>样式管理</span></a></li>
                <li><a id="open_auxiliary" title="显示最小高度、间距和辅助颜色，以便于组件拖放"><i class="qam_ico qam_ico_open_auxiliary"></i><span>视觉辅助</span></a></li>
                <li class="separator"> |</li>
                <li><a id="undo"><i class="qam_ico qam_ico_undo"></i><span>撤销</span></a></li>
                <li><a id="redo"><i class="qam_ico qam_ico_redo"></i><span>重做</span></a></li>
                <li><a id="preview"><i class="qam_ico qam_ico_preview"></i><span>预览</span></a></li>
                <li><a id="save"><i class="qam_ico qam_ico_save"></i><span>保存</span></a></li>
            </ul>
        </div>
        <!-- 样式列表管理 -->
        <div class="dropdown_css_list_container" id="dropdown_css_list_container">
            <div id="dropdown_css_list"></div>
            <a class="bt_tip_hit" id="private_style">页面私有样式</a>
        </div>
        <!-- 删除元素 -->
        <div class="recycle_bin" id="recycle_bin"></div>
    </div>
</div>

<!-- 边栏 开始 -->
<div class="qam_custom_side qam_reset">
<!-- 类别导航 开始 -->
<div class="qam_custom_side_nav">
    <ul id="qam_custom_side_nav">
        <li><a code_type="1">容器</a></li>
        <li class="current"><a code_type="2">模块</a></li>
        <li><a code_type="3">组件</a></li>
    </ul>
</div>
<!-- 类别导航 结束 -->
<!-- 切换标签容器 开始 -->
<div class="qam_custom_side_tag" id="qam_custom_side_tag">
    <a id="switch_project_container" class="switch_tag_button current">项目容器</a>
    <a id="switch_tag_container" class="switch_tag_button">标签容器</a>
</div>
<!-- 切换标签容器 开始 -->
<!-- 筛选 开始 -->
<div class="qam_custom_side_filter" id="qam_custom_side_filter">
    <div class="type_select">
        <div class="like_select"><p id="parent_project_name">选择主项目</p><span class="qam_icon_down"></span></div>
        <ul class="select_drop_down" id="select_parent_project">
            <li style="display:block;"><a project_id='-1'>选择主项目</a></li>

        </ul>
    </div>
    <div class="type_select">
        <div class="like_select"><p id="child_project_name">选择子项目</p><span class="qam_icon_down"></span></div>
        <ul class="select_drop_down" id="select_child_project">
            <li style="display:block;"><a project_id='-1'>选择子项目</a></li>
        </ul>
    </div>
</div>
<!-- 筛选 结束 -->
<!-- 列表 开始 -->
<div class="qam_custom_side_list loading" id="qam_custom_side_list" style="height:900px;">
<ul id="side_list">
    <!--
        <li class="current">
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img1_s.png"></a>
                <span class="module_name">分页</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_big" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
        <li>
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img4_s.png"></a>
                <span class="module_name">slideshow</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_preview_b" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
        <li>
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img5_s.png"></a>
                <span class="module_name">消息记录</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_preview_b" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
        <li>
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img1_s.png"></a>
                <span class="module_name">分页</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_preview_b" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
        <li>
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img2_s.png"></a>
                <span class="module_name">评论模块</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_preview_b" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
        <li>
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img3_s.png"></a>
                <span class="module_name">我的账户</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_preview_b" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
        <li>
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img2_s.png"></a>
                <span class="module_name">分页</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_preview_b" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
        <li>
            <div class="img_wrap">
                <a href="#"><img alt="" src="css/sample/img3_s.png"></a>
                <span class="module_name">分页</span>
            </div>
            <div class="img_op">
                <div class="img_op_inner">
                    <a href="#"><i class="qam_ico qam_ico_preview_b" title="预览"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_edit" title="编辑"></i></a>
                    <a href="#"><i class="qam_ico qam_ico_del" title="删除"></i></a>
                </div>
            </div>
        </li>
    -->
</ul>

<!-- 标签容器列表，前台维护 -->
<ul id="side_list_tag" class="side_list_tag">
    <li>
        <div class="img_wrap" draggable="true">
            <a style="background-image:url(css/sample/tag/div.png)"></a>
            <!--<span class="module_name">div标签</span>-->
            <code class="code_container" id="code_container" code_id="" code_type="1" prefix="ct_">
                <div data_container="1"></div>
            </code>
        </div>
        <div class="img_op">
            <div class="img_op_inner"><a><i class="qam_ico qam_ico_append" action="append" title="追加到当前节点里面"></i></a><a><i class="qam_ico qam_ico_insert_after" action="insertAfter" title="添加到当前节点的后面"></i></a></div>
        </div>
    </li>
    <li>
        <div class="img_wrap" draggable="true">
            <a style="background-image:url(css/sample/tag/p.png)"></a>
            <!--<span class="module_name">p标签</span>-->
            <code class="code_container" id="code_container" code_id="" code_type="1" prefix="ct_">
                <p data_container="1"></p>
            </code>
        </div>
        <div class="img_op">
            <div class="img_op_inner"><a><i class="qam_ico qam_ico_append" action="append" title="追加到当前节点里面"></i></a><a><i class="qam_ico qam_ico_insert_after" action="insertAfter" title="添加到当前节点的后面"></i></a></div>
        </div>
    </li>
    <li>
        <div class="img_wrap" draggable="true">
            <a style="background-image:url(css/sample/tag/a.png)"></a>
            <!--<span class="module_name">span标签</span>-->
            <code class="code_container" id="code_container" code_id="" code_type="1" prefix="ct_">
                <a href="javascript:void(0)"></a>
            </code>
        </div>
        <div class="img_op">
            <div class="img_op_inner"><a><i class="qam_ico qam_ico_append" action="append" title="追加到当前节点里面"></i></a><a><i class="qam_ico qam_ico_insert_after" action="insertAfter" title="添加到当前节点的后面"></i></a></div>
        </div>
    </li>
    <li>
        <div class="img_wrap" draggable="true">
            <a style="background-image:url(css/sample/tag/span.png)"></a>
            <!--<span class="module_name">span标签</span>-->
            <code class="code_container" id="code_container" code_id="" code_type="1" prefix="ct_">
                <span></span>
            </code>
        </div>
        <div class="img_op">
            <div class="img_op_inner"><a><i class="qam_ico qam_ico_append" action="append" title="追加到当前节点里面"></i></a><a><i class="qam_ico qam_ico_insert_after" action="insertAfter" title="添加到当前节点的后面"></i></a></div>
        </div>
    </li>
    <li>
        <div class="img_wrap" draggable="true">
            <a style="background-image:url(css/sample/tag/ol.png)"></a>
            <!--<span class="module_name">ol标签</span>-->
            <code class="code_container" id="code_container" code_id="" code_type="1" prefix="ct_">
                <ol>
                    <li data_container="1"></li>
                    <li data_container="1"></li>
                    <li data_container="1"></li>
                </ol>
            </code>
        </div>
        <div class="img_op">
            <div class="img_op_inner"><a><i class="qam_ico qam_ico_append" action="append" title="追加到当前节点里面"></i></a><a><i class="qam_ico qam_ico_insert_after" action="insertAfter" title="添加到当前节点的后面"></i></a></div>
        </div>
    </li>
    <li>
        <div class="img_wrap" draggable="true">
            <a style="background-image:url(css/sample/tag/ul.png)"></a>
            <!--<span class="module_name">ul标签</span>-->
            <code class="code_container" id="code_container" code_id="" code_type="1" prefix="ct_">
                <ul>
                    <li data_container="1"></li>
                    <li data_container="1"></li>
                    <li data_container="1"></li>
                </ul>
            </code>
        </div>
        <div class="img_op">
            <div class="img_op_inner"><a><i class="qam_ico qam_ico_append" action="append" title="追加到当前节点里面"></i></a><a><i class="qam_ico qam_ico_insert_after" action="insertAfter" title="添加到当前节点的后面"></i></a></div>
        </div>
    </li>
    <li>    <!-- 占位图 -->
        <div class="img_wrap" draggable="true">
            <a style="background-image:url(css/sample/tag/img.png)"></a>
            <!--<span class="module_name">ul标签</span>-->
            <code class="code_container" id="code_container" code_id="" code_type="1" prefix="ct_">
                <img src="http://qam.oa.com/qam/img.php?50x50" alt="占位图" placeholder="1">
            </code>
        </div>
        <div class="img_op">
            <div class="img_op_inner"><a><i class="qam_ico qam_ico_append" action="append" title="追加到当前节点里面"></i></a><a><i class="qam_ico qam_ico_insert_after" action="insertAfter" title="添加到当前节点的后面"></i></a></div>
        </div>
    </li>
</ul>
</div>
<!-- 列表 结束 -->
</div>
<!-- 边栏 结束 -->

<!-- 可视化编辑区域 开始 -->
<div class="custom_canvas_area" id="custom_canvas_area"></div>
<!-- 可视化编辑区域 结束 -->

<div class="qam_bottomfix_bar qam_reset">
    <div class="qam_bottomfix_bar_inner">
        <div class="inspect">
            <a title="定位元素" class="" id="inspect_trigger"><i class="qam_ico qam_ico_inspect"></i></a>
        </div>
        <div class="inspect_cont">
            <div class="guild" id="dom_tree">
                <!--<a>div.guild</a> &gt; <a >div.inspect_cont</a> &gt; <a >div.qam_bottomfix_bar</a> &gt; <a >div.wrapper</a> &gt; <a >body</a>-->
            </div>
        </div>
    </div>
</div>
</div>

<!-- 布局的选择浮层 开始-->
<div id="qam_popup_layout" class="qam_popup qam_popup_select_layout" style="width:527px;">
    <div class="qam_popup_inner" id="layout_step1">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>布局</h3>
                <a class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">
            <div class="select_layout_step step1">
                <strong>1.选择布局</strong> <span>2.配置布局</span> <span>3.预览</span>
            </div>
            <div class="layout_list clear">
                <ul id="layout_list">
                    <!--<li>
                        <a href="#" title="通栏布局"><img src="css/img/01.png" alt="布局略缩图"></a> <span>通栏布局</span>
                    </li>
                    <li>
                        <a href="#" title="两栏布局，主体内容在前，左栏固定宽度，右栏自适应宽度"><img src="css/img/02.png" alt="布局略缩图"></a> <span>两栏布局（left）</span>
                    </li>
                    <li>
                        <a href="#" title="两栏布局，主体内容在前，右栏栏固定宽度，左栏自适应宽度"><img src="css/img/03.png" alt="布局略缩图"></a> <span>两栏布局(right)</span>
                    </li>
                    <li>
                        <a href="#" title="三栏布局，主体内容在前，左右两栏固定宽度"><img src="css/img/04.png" alt="布局略缩图"></a> <span>三栏布局</span>
                    </li>
                    <li>
                        <a href="#" title="两栏布局，主体内容在前，左栏固定宽度，右栏自适应宽度,等高布局"><img src="css/img/02_1.png" alt="布局略缩图"></a> <span>两栏布局（left | 等高）</span>
                    </li>
                    <li>
                        <a href="#" title="两栏布局，主体内容在前，右栏栏固定宽度，左栏自适应宽度，等高"><img src="css/img/03_1.png" alt="布局略缩图"></a> <span>两栏布局(right | 等高)</span>
                    </li>-->
                </ul>
            </div>
        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit layout_next" title="下一步" href="#" step_id="1">下一步</a>
                <!--<a class="bt_tip_normal" title="取消" href="#">取消</a>-->
                <!--<span class="bt_tip_forbid">无法点击</span>-->
            </div>
        </div>
    </div>
    <div class="qam_popup_inner" id="layout_step2" style="display:none;">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>布局</h3>
                <a href="#" class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">
            <div class="select_layout_step step2">
                <span>1.选择布局</span> &gt; <strong>2.配置布局</strong> &gt; <span>3.预览</span>
            </div>
            <div class="form_layout_cofig">
                <form action="" id="param_form">
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">边栏宽度：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="300px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">栏目间距：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="10px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">边栏背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#CCD1D4"/> <span class="background" style="background-color:#CCD1D4"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">主栏背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#E3D7CB"/>-->
                    <!--<span class="background" style="background-color:#E3D7CB"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--&lt;!&ndash;如果是在一个空白页面添加布局就增加header和footer选项。&ndash;&gt;-->
                    <!--<fieldset class="select">-->
                    <!--<legend><label for=""><input type="checkbox" id=""/> header</label></legend>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">header高度：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="300px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">header背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#628A67"/>-->
                    <!--<span class="background" style="background-color:#628A67"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</fieldset>-->
                    <!--&lt;!&ndash;当用户选中了checkbox，就增加select的类名&ndash;&gt;-->
                    <!--<fieldset class="select">-->
                    <!--<legend><label for=""><input type="checkbox" id=""/> footer</label></legend>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">footer高度：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="300px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">footer背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#CCD1D4"/>-->
                    <!--<span class="background" style="background-color:#CCD1D4"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</fieldset>-->
                </form>
            </div>
        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit layout_last" title="上一步" href="#" step_id="1">上一步</a>
                <a class="bt_tip_hit layout_next" title="下一步" href="#" step_id="2">下一步</a>
                <!--<a class="bt_tip_normal" title="取消" href="#">取消</a>-->
                <!--<span class="bt_tip_forbid">无法点击</span>-->
            </div>
        </div>
    </div>
    <div class="qam_popup_inner" id="layout_step3" style="display:none;">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>布局</h3>
                <a class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">
            <div class="select_layout_step step3">
                <span>1.选择布局</span> &gt; <span>2.配置布局</span> &gt; <strong>3.预览</strong>
            </div>
            <div class="layout_preview">
                <img src="css/sample/layout_preview.png" id="layout_preview" alt="">
            </div>
        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit layout_last" id="no_param_layout_last" title="上一步" href="#" step_id="2">上一步</a>
                <a class="bt_tip_hit layout_next" title="生成布局" href="#" step_id="3">生成布局</a>
                <!--<a class="bt_tip_normal" title="取消" href="#">取消</a>-->
                <!--<span class="bt_tip_forbid">无法点击</span>-->
            </div>
        </div>
    </div>
</div>
<!-- 布局的选择浮层 结束 -->

<!-- 配置参数的浮层 开始-->
<div id="qam_popup_pick_param" class="qam_popup qam_popup_select_layout" style="width:527px;">
    <div class="qam_popup_inner">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>配置参数</h3>
                <a class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">
            <div class="form_layout_cofig">
                <form action="" id="param_yet_form">
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">边栏宽度：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="300px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">栏目间距：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="10px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">边栏背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#CCD1D4"/> <span class="background" style="background-color:#CCD1D4"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">主栏背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#E3D7CB"/>-->
                    <!--<span class="background" style="background-color:#E3D7CB"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--&lt;!&ndash;如果是在一个空白页面添加布局就增加header和footer选项。&ndash;&gt;-->
                    <!--<fieldset class="select">-->
                    <!--<legend><label for=""><input type="checkbox" id=""/> header</label></legend>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">header高度：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="300px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">header背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#628A67"/>-->
                    <!--<span class="background" style="background-color:#628A67"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</fieldset>-->
                    <!--&lt;!&ndash;当用户选中了checkbox，就增加select的类名&ndash;&gt;-->
                    <!--<fieldset class="select">-->
                    <!--<legend><label for=""><input type="checkbox" id=""/> footer</label></legend>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">footer高度：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="300px"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="panel">-->
                    <!--<span class="panel_tit">footer背景：</span>-->

                    <!--<div class="panel_main">-->
                    <!--<input type="text" class="inputstyle_pop" value="#CCD1D4"/>-->
                    <!--<span class="background" style="background-color:#CCD1D4"></span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</fieldset>-->
                </form>
            </div>
        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit" title="确定">确定</a>
                <a class="bt_tip_normal" title="取消">取消</a>
            </div>
        </div>
    </div>
</div>
<!-- 配置参数的浮层 结束 -->

<!-- 内联样式浮层 开始-->
<div id="qam_popup_inline_style" class="qam_popup qam_popup_inline_style" style="width:480px;">
    <div class="qam_popup_inner">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>微调样式</h3>
                <a class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">
            <p>
                <span>class：</span>
                <input type="text" size="10" class="long_input" id="class">
                <input type="hidden" id="auxiliary_class_container" value="">
            </p>

            <p>
                <span>宽度：</span>
                <input type="text" size="10" class="normal_input" id="width">
                <a class="add_unit default" unit="px">px</a> | <a class="add_unit" unit="em">em</a> | <a class="add_unit" unit="%">%</a>
                <span class="unit_tips">请选择单位</span>
            </p>

            <p>
                <span>高度：</span>
                <input type="text" size="10" class="normal_input" id="height">
                <a class="add_unit default" unit="px">px</a> | <a class="add_unit" unit="em">em</a> | <a class="add_unit" unit="%">%</a>
                <span class="unit_tips">请选择单位</span>
            </p>

            <p>
                <span>left：</span>
                <input type="text" size="10" class="normal_input" id="left">
                <a class="add_unit default" unit="px">px</a> | <a class="add_unit" unit="em">em</a> | <a class="add_unit" unit="%">%</a>
                <span class="unit_tips">请选择单位</span>
            </p>

            <p>
                <span>top：</span>
                <input type="text" size="10" class="normal_input" id="top">
                <a class="add_unit default" unit="px">px</a> | <a class="add_unit" unit="%">%</a>
                <span class="unit_tips">请选择单位</span>
            </p>

            <p>
                <span>行高：</span>
                <input type="text" size="10" class="normal_input" id="line_height">
                <a class="add_unit default" unit="px">px</a> | <a class="add_unit" unit="em">em</a> | <a class="add_unit" unit="%">%</a>
                <span class="unit_tips">请选择单位</span>
            </p>

            <p>
                <span>字体大小：</span>
                <input type="text" size="10" class="normal_input" id="font_size">
                <a class="add_unit default" unit="px">px</a> | <a class="add_unit" unit="em">em</a> | <a class="add_unit" unit="%">%</a>
                <span class="unit_tips">请选择单位</span>
            </p>

            <p>
                <span>字体颜色：</span>#<input type="text" size="10" class="color_input" id="font_color"><b class="color_tips"></b>
            </p>

            <p>
                <span>外边距：</span>
                <input type="text" size="1" class="margin_text" id="margin-top">px
                <input type="text" size="1" class="margin_text" id="margin-right">px
                <input type="text" size="1" class="margin_text" id="margin-bottom">px
                <input type="text" size="1" class="margin_text" id="margin-left">px
                <input type="checkbox" class="margin_auto" id="margin_auto"><label for="margin_auto">居中</label>
            </p>

            <p>
                <span>内边距：</span>
                <input type="text" size="1" class="padding_text" id="padding-top">px
                <input type="text" size="1" class="padding_text" id="padding-right">px
                <input type="text" size="1" class="padding_text" id="padding-bottom">px
                <input type="text" size="1" class="padding_text" id="padding-left">px
            </p>

            <p>
                <span>背景颜色：</span>#<input type="text" size="10" class="color_input" id="bg_color"><b class="color_tips"></b>
            </p>

            <p>
                <span>背景图：</span>s
                <input type="radio" name="sprite" value="0" class="sprite" id="slice_img">碎图
                <input type="radio" name="sprite" checked="checked" value="1" class="sprite" id="normal_img">非碎图
                <span class="bg_img" id="bg_img">请先选择类型，然后拖曳图片到这里<a class="delete_bg_img" style="display:none;">删除</a></span>
            </p>

            <p>
                <span>背景repeat：</span>
                <!--<input type="text" size="10" class="normal_input" id="bg_repeat">-->
                <a class="add_unit bg_repeat" unit="no-repeat">no-repeat</a> | <a class="add_unit bg_repeat" unit="repeat-x">repeat-x</a> | <a class="add_unit bg_repeat" unit="repeat-y">repeat-y</a>
            </p>

            <p>
                <span>背景position：</span>
                <span>
                    X <input type="text" size="10" class="normal_input" id="bg_position_x">
                    <!--<a class="add_unit position_unit" unit="center">center</a> | <a class="add_unit position_unit" unit="px">px</a>-->
                </span>
                <span>
                    Y <input type="text" size="10" class="normal_input" id="bg_position_y">
                    <!--<a class="add_unit position_unit" unit="center">center</a> | <a class="add_unit position_unit" unit="px">px</a>-->
                </span>

            </p>

            <p>
                <span>位置position：</span>
                <a class="add_unit position" unit="relative">relative</a> | <a class="add_unit position" unit="absolute">absolute</a> | <a class="add_unit position" unit="fixed">fixed</a>
            </p>


            <p class="inline_style_tips">您还可以直接写样式：（可以换行，但是属性与属性要有分号隔开）</p>
            <textarea id="inline_style_content"></textarea>
        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit" title="确定">确定</a>
                <a class="bt_tip_normal" title="取消">取消</a>
            </div>
        </div>
    </div>
</div>
<!-- 内联样式浮层 结束 -->

<!-- 元素结构浮层 开始 -->
<div id="qam_popup_structure" class="qam_popup qam_popup_structure" style="width:800px">
    <div class="qam_popup_inner">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>手动改变结构</h3>
                <a class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">
            <textarea id="structure_content"></textarea>
        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit" title="确定">确定</a>
                <a class="bt_tip_normal" title="取消">取消</a>
            </div>
        </div>
    </div>
</div>
<!-- 元素结构浮层 结束 -->

<!-- 独立样式浮层 开始 -->
<div id="qam_popup_global_style" class="qam_popup qam_popup_global_style" style="width:500px">
    <div class="qam_popup_inner">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>设置页面的独立样式</h3>
                <a class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">
            <textarea id="global_style_content"></textarea>
        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit" title="确定">确定</a>
                <a class="bt_tip_normal" title="取消">取消</a>
            </div>
        </div>
    </div>
</div>
<!-- 独立样式浮层 结束 -->

<!-- 效果样式集合浮层 开始 -->
<div id="qam_popup_effect" class="qam_popup qam_popup_effect" style="width:500px">
    <div class="qam_popup_inner">
        <div class="qam_popup_hd">
            <div class="qam_popup_hd_inner">
                <h3>添加常用样式集合</h3>
                <a class="ico_x"></a>
            </div>
        </div>
        <div class="qam_popup_bd">

        </div>
        <div class="qam_popup_ft">
            <div class="global_tip_button">
                <a class="bt_tip_hit" title="确定">确定</a>
                <a class="bt_tip_normal" title="取消">取消</a>
            </div>
        </div>
    </div>
</div>
<!-- 效果样式集合浮层 结束 -->

<!-- 审查元素的半透明浮层1 -->
<div class="inspect_element_cover" id="inspect_element_cover">
    <span class="info"></span>
</div>

<!-- 审查元素的半透明浮层2 -->
<div class="inspect_element_cover inspect_element_cover2" id="inspect_element_cover2"></div>

<!-- 元素的控制面板 -->
<div class="qam_action_panel qam_reset">
    <h3 class="title">当前节点：<span id="tag_name">未选中</span></h3>

    <div class="actions">
        <p>你可以：</p>

        <p><a class="bt_tip_hit disabled" id="dom_copy">复制当前节点</a><!--<span>快速复制粘贴当前节点</span>--></p>

        <p><a class="bt_tip_hit disabled" id="dom_delete">删除当前节点</a><!--<span>删除节点本身</span>--></p>

        <p><a class="bt_tip_hit disabled" id="dom_empty">清空当前节点</a><!--<span>删除节点里面的内容</span>--></p>

        <p><a class="bt_tip_hit disabled" id="dom_pick_param">配置布局</a><!--<span>配置布局</span>--></p>

        <p><a class="bt_tip_hit disabled" id="dom_style">微调节点样式</a><!--<span>修改指定元素的样式</span>--></p>

        <p><a class="bt_tip_hit disabled" id="dom_structure">修改节点结构</a><!--<span>修改指定元素的结构</span>--></p>

        <p><a class="bt_tip_hit disabled" id="dom_img_size">修改占位图尺寸</a><!--<span>修改指定元素的结构</span>--></p>

        <p><a class="bt_tip_hit disabled" id="dom_effect">添加常用样式类</a><!--<span>添加常用样式类</span>--></p>

    </div>
    <!-- 箭头 -->
    <a class="arrow">&lt;</a>
</div>

<!-- 等待提示 -->
<div id="qam_notify_area" class="sys_notify_pane pane_w">
    <div class="sys_notify_pane_inner"></div>
</div>


<!-- 键盘快捷键 -->
<div class="qam_key_list" id="qam_key_list">
    <h3>键盘快捷键</h3>

    <div class="key_list_container">
        <ul>
            <h5>元素操作</h5>
            <li><span class="key">delete ：</span><span class="description">删除当前选中的元素</span></li>
            <li><span class="key">&lt;Ctrl&gt; + ↑ ：</a></span><span class="description">选中元素与上一个兄弟节点互换</span></li>
            <li><span class="key">&lt;Ctrl&gt; + ↓ ：</span><span class="description">选中元素与下一个兄弟节点互换</span></li>
            <li><span class="key">&lt;Ctrl&gt; + V ：</span><span class="description">快速复制</span></li>
            <li><span class="key">&lt;Ctrl&gt; + E ：</span><span class="description">快速清空</span></li>
            <li><span class="key">&lt;Ctrl&gt; + M ：</span><span class="description">使选中元素变为可拖动和改变大小</span></li>
        </ul>
        <ul>
            <h5>弹框控制</h5>
            <li><span class="key">S ：</span><span class="description">快速打开设置样式弹框</span></li>
            <li><span class="key">A ：</span><span class="description">快速打开修改结构弹框</span></li>
            <li><span class="key">G ：</span><span class="description">快速打开独立样式弹框</span></li>
            <li><span class="key">E ：</span><span class="description">快速打开常用样式弹框</span></li>
            <li><span class="key">P ：</span><span class="description">快速修改占位图尺寸</span></li>
            <li><span class="key">L ：</span><span class="description">快速添加布局</span></li>
            <li><span class="key">Esc ：</span><span class="description">关闭弹框</span></li>
        </ul>
        <ul>
            <h5>辅助功能</h5>
            <li><span class="key">&lt;Alt&gt; + Q ：</span><span class="description">快速打开或隐藏右下角的操作面板</span></li>
            <li><span class="key">&lt;Alt&gt; + R ：</span><span class="description">打开或关闭视觉辅助</span></li>
            <li><span class="key">&lt;Alt&gt; + E ：</span><span class="description">打开或关闭审查元素</span></li>
            <li><span class="key">&lt;Alt&gt; + Z ：</span><span class="description">撤销操作</span></li>
            <li><span class="key">&lt;Alt&gt; + Y ：</span><span class="description">重做操作</span></li>
            <li><span class="key">&lt;Alt&gt; + P ：</span><span class="description">预览操作</span></li>
            <li><span class="key">&lt;Alt&gt; + S ：</span><span class="description">保存操作</span></li>
        </ul>
    </div>
    <p class="links"><a id="open_window">在新窗口中打开</a> - <a id="close">关闭</a></p>
</div>

<div class="placeholder_size" id="placeholder_size">
    <span class="attr">W:</span><input type="text" id="placeholder_w"><span class="unit">px</span>
    <span class="attr">H:</span><input type="text" id="placeholder_h"><span class="unit">px</span>
    <a class="bt_tip_hit" id="submit">确定</a>
    <a class="bt_tip_hit" id="cancel">取消</a>
</div>

<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/colorpicker/colorpicker.js" type="text/javascript"></script>
<script src="js/public.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/page.js" type="text/javascript"></script>
<script type="text/javascript">
    var iframe_flag = false;    //不加载iframe结构

    $(document).ready(function () {
        page.init();
        history.init();
    });
</script>
</body>
</html>